<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Add a third party vector tile source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--     <script src='mapbox-gl.js'></script>
    <link href='mapbox-gl.css' rel='stylesheet' /> -->
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>

    <div id='map'></div>
    <script>
        mapboxgl.accessToken =
            'pk.eyJ1IjoiaGFwcHkxMjM0ZCIsImEiOiJjajY3azVqZGYwNjB1MnhyMG90OGx3YmtuIn0.tR7UExjbbjC6q97-lGNvPg';
        var tileset = 'mapbox.streets';
        var map = new mapboxgl.Map({
            container: 'map',
            zoom: 13,
            center: [113.747646331787, 34.3388509750366],
            style: 'mapbox://styles/mapbox/streets-v10',
            //style: 'mapbox://styles/mapbox/light-v9',
            hash: false
        });

        map.on('load', function loaded() {
            map.addSource('custom-go-vector-tile-source', {
                type: 'vector',
                tiles: ['http://127.0.0.1:5000/tiles/agnp/points/{z}/{x}/{y}']//agnp为postgis中坐标系为Epsg:4326的点shp表，points，为自己定义图层名称
            });
            // map.addLayer({
            //     id: 'background',
            //     type: 'background',
            //     paint: {
            //         'background-color': 'white'
            //     }
            // });
            map.addLayer({
                "id": "custom-go-vector-tile-layer",
                "type": "circle",
                "source": "custom-go-vector-tile-source",
                "source-layer": "points",
                paint: {
                    'circle-radius': {
                        'base': 1,
                        stops: [
                            [9, 8],
                            [10, 7],
                            [11, 6],
                            [12, 5],
                            [13, 15],
                            [14, 20],
                            [15, 0.2],
                            [20, 0.1]
                        ]
                    },
                    // 'circle-color': {
                    //     // property: 'gid',
                    //     // stops: [
                    //     //     [0, '#990055'],
                    //     //     [9, '#2a55b9']
                    //     // ]
                    // },
                    'circle-color':'#990055',
                    'circle-opacity': 1
                }
            });
        });
        // When a click event occurs on a feature in the custom-go-vector-tile-layer layer, open a popup at the
        // location of the feature, with description HTML from its properties.
        map.on('click', 'custom-go-vector-tile-layer', function (e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.name;

            // Ensure that if the map is zoomed out such that multiple
            // copies of the feature are visible, the popup appears
            // over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML(description)
                .addTo(map);
        });

        // Change the cursor to a pointer when the mouse is over the custom-go-vector-tile-layer layer.
        map.on('mouseenter', 'custom-go-vector-tile-layer', function () {
            map.getCanvas().style.cursor = 'pointer';
        });

        // Change it back to a pointer when it leaves.
        map.on('mouseleave', 'custom-go-vector-tile-layer', function () {
            map.getCanvas().style.cursor = '';
        });
    </script>

</body>

</html>